<template>
  <div class="row">
    <div class="col-12">
      <form @submit.prevent="onSubmit">
        <h3 class="text-muted my-5">新添加的Pizza</h3>
        <div class="form-group row">
          <label class="col-1" for="id_1">品种</label>
          <div class="col-11">
            <input class="form-control" type="text" placeholder="" v-model="newPizza.name" id="id_1"/>
          </div>
        </div>
        <div class="form-group row">
          <label class="col-1" for="id_2">描述</label>
          <div class="col-11">
            <textarea class="form-control" rows="10" placeholder="" v-model="newPizza.describe" id="id_2"></textarea>
          </div>
        </div>
        <p><strong>选项一</strong></p>
        <div class="form-group row"><!--空一列 offset-1-->
          <label class="col-1 text-right" for="id_3">尺寸</label>
          <div class="col-11">
            <input class="form-control" type="text" placeholder="" v-model="newPizza.size_1" id="id_3"/>
          </div>
        </div>
        <div class="form-group row">
          <label class="col-1 text-right" for="id_4">价格</label>
          <div class="col-11">
            <input class="form-control" type="text" placeholder="" v-model="newPizza.price_1" id="id_4"/>
          </div>
        </div>
        <p><strong>选项二</strong></p>
        <div class="form-group row">
          <label class="col-1 m-auto" for="id_5">尺寸</label>
          <div class="col-11">
            <input class="form-control" type="text" placeholder="" v-model="newPizza.size_2" id="id_5"/>
          </div>
        </div>
        <div class="form-group row">
          <label class="col-1 m-auto" for="id_6">价格</label>
          <div class="col-11">
            <input class="form-control" type="text" placeholder="" v-model="newPizza.price_2" id="id_6"/>
          </div>
        </div>
        <div class="form-group row">
          <button type="button" @click="addMenuItem" class="btn btn-success form-control  col-md-12 mt-5">添加</button>
        </div>
      </form>
    </div>
    <button class="btn btn-success" @click="click">获取数据</button>
  </div>
</template>

<script>
import Bmob from 'hydrogen-js-sdk'
export default {
  name: 'NewPizza',
  data () {
    return {
      newPizza: {}
    }
  },
  methods: {
    addMenuItem () {
      // console.log(this.newPizza)
      let data = {
        name: this.newPizza.name,
        describe: this.newPizza.describe,
        options: [
          {
            size: this.newPizza.size_1,
            price: this.newPizza.price_1
          },
          {
            size: this.newPizza.size_2,
            price: this.newPizza.price_2
          }
        ]
      }
      // axios写法
      // this.http.post('newPizzaTable.json', data)
      //   .then(res => {
      //     console.log(data)
      //     this.$router.push('/menu')
      //   })
      //   .catch(err => console.log(err))
      // 1、axios; 2、vue-resource; 3、es6 fetch
      // fetch('http...', {
      //   method: 'POST',
      //   headers: {
      //     'Content-type': 'application/json'
      //   },
      //   body: JSON.stringify(data)
      // })
      //   .then(res => console.log(res))
      //   .then(data => {
      //     console.log(data)
      //     this.$router.push('/menu')
      //   })
      //   .catch(err => console.log(err))
      // Bomb自带的方法 添加一条数据
      const query = Bmob.Query('newPizzaTable')
      query.set('name', data.name)
      query.set('describe', data.describe)
      query.set('options', data.options)
      query.save().then(res => {
        console.log(res)
        // this.$router.push('/menu')
        this.$store.commit('pushToMenuItems', res)
      }).catch(err => {
        console.log(err)
      })
    },
    click () {
    // 获取数据表中所有的数据
      const query = Bmob.Query('newPizzaTable')
      query.find().then(res => {
        console.log(res)
      })
    }
  }
}
</script>

<style lang="stylus" scoped>

</style>
